<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            .row { line-height: 36px ; text-align: center ; margin: 0 ; border-bottom: none!important; }
            .row:last-child { border-bottom: 1px solid #dee2e6!important; }
            .row.title { font-weight: bold ; }
        </style>
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>
        <div class="container" id="app">
            <div class="row" style="margin: 15px auto ;">
                <div class="col-6">
                    <input type="text" v-model.trim="nameKey" placeholder="根据姓名查找" style="width: 80%">
                </div>
                <div class="col-6">
                    <input type="text" v-model.trim="scoreKey" placeholder="根据总成绩查找" style="width: 80%">
                </div>
            </div>
            <div class="row border title">
                <div class="col-1">序号</div>
                <div class="col-1">学号</div>
                <div class="col-2">姓名</div>
                <div class="col-2">语文</div>
                <div class="col-2">数学</div>
                <div class="col-2">总分</div>
                <div class="col-2">操作</div>
            </div>
            <div class="row border" v-for="(s,i) in studentList">
                <div class="col-1">{{i+1}}</div>
                <div class="col-1">{{s.id}}</div>
                <div class="col-2">{{s.name}}</div>
                <div class="col-2">{{s.language}}</div>
                <div class="col-2">{{s.mathematics}}</div>
                <div class="col-2">{{s.language + s.mathematics}}</div>
                <div class="col-2">
                    <a class="btn btn-primary btn-sm" @click.prevent.stop="handler(i)">删除</a>
                </div>
            </div>
        </div>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        nameKey: '',
                        scoreKey: '' ,
                        students: [
                            {id: 1001 , name: '李白' , language: 98 , mathematics: 68 },
                            {id: 1002 , name: '杜甫' , language: 99 , mathematics: 75 },
                            {id: 1003 , name: '岑参' , language: 96 , mathematics: 80 },
                            {id: 1004 , name: '白居易' , language: 97 , mathematics: 82 },
                            {id: 1005 , name: '沈括' , language: 95 , mathematics: 95 }
                        ]
                    }
                },
                methods:{
                    handler(index){
                        this.students.splice( index , 1 );
                    }
                },
                computed:{
                    studentList(){
                        if( this.nameKey ){
                            return this.students.filter( s => s.name.includes( this.nameKey ) );
                        }

                        if( this.scoreKey ){
                            console.log( typeof this.scoreKey );
                            return this.students.filter( s => s.language + s.mathematics > this.scoreKey );
                        }
                        return this.students ;
                    }
                }
            });
            app.mount( '#app' );
        </script>
    </body>
</html>